<template>
	<view class="addProjectInfo">
		<view class="title-box">
			<view class="text">请确保正确，否则将影响结果通知。</view>
		</view>
		<view class="cu-form-group">
			<view class="title">母亲姓名</view>
			<input placeholder="请填写" name="input" v-model="dataList.momName"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">孕周</view>
			<picker mode="multiSelector" :value="daysWeeksIndex"  @change="dayWeeksChange" :range="daysWeeksList">
				<view class="picker">
					{{dataList.weeks}}
					周+
					{{dataList.days}}
					天
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">证件类型</view>
			<picker :value="cardType" :range="cardList">
				<view class="picker">
					{{cardType}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">证件号</view>
			<input placeholder="请填写" maxlength="19" name="input" type="idcard" v-model="dataList.momCard"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">现居住地址</view>
			<picker mode="region" @change="RegionChange" :value="region">
				<view class="picker">
					{{region[0]}}，{{region[1]}}，{{region[2]}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">详细地址</view>
			<input placeholder="请填写" name="input" v-model="dataList.address"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">婴儿性别</view>
			<picker :value="babySexText" :range-key="'name'" :range="sexList" @change="PickerChange">
				<view class="picker">
					{{babySexText?babySexText:'请选择'}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">婴儿出生体重</view>
			<input placeholder="请填写" name="input" maxlength="7" v-model="dataList.weight"></input>
		</view>
		<view class="cu-form-group" @click="$refs['date-time'].show();">
			<view class="title">婴儿生日（公历）</view>
			<input placeholder="请选择" name="input" v-model="dataList.birthTime"></input>
			<date-time-picker ref='date-time' :indicatorStyle='indicatorStyle' :type="'datetime'" @change='DateChange'></date-time-picker>
		</view>
		<view class="cu-form-group">
			<view class="title">血卡条码</view>
			<input placeholder="请填写" style="padding-right: 7rpx;" name="input" v-model="dataList.barCode"></input>
			<text class='cuIcon-scan text-scan' @click="clickScan"></text>
		</view>
		<view class="cu-form-group">
			<view class="title">联系人手机</view>
			<input placeholder="请填写" name="input" maxlength="11" v-model="dataList.phone"></input>
		</view>
		<view class="but">
			<view class="span">
				<radio class='ztBG margin-left-sm' style="margin-right: 5px;" @click="clickRadio" :checked="radio"></radio>
				<view class="span">
					阅读并同意使用<view class="text-ref" @click="clickFuwu">《服务协议》</view> 和 <view class="text-ref" @click="clickYinsi">《隐私权政策》</view>
				</view>
			</view>
			<view class="sendbut-box">
				<button class="round sendbut" @click="clickAddInfo">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import DateTimePicker from '../../../components/bory-dateTimePicker/bory-dateTimePicker.vue'
	import queryApi from '@/config/api/home.js'

	export default {
		components: {
			DateTimePicker
		},
		onLoad() {

		},
		data() {
			return {
				cardType: '身份证',
				cardList: ['身份证'],
				babySexText: '',
				sexList: [{
						"code": "BOY",
						"name": "男"
					},
					{
						"code": "GIRL",
						"name": "女"
					},
					{
						"code": "UNKNOWN",
						"name": "未知"
					}
				],
				region: ['广东省', '广州市', '海珠区'],
				daysWeeksIndex: [0, 0],
				daysWeeksList: [
					[20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47,
						48, 49
					],
					[0, 1, 2, 3, 4, 5, 6]
				],
				radio: true,
				dataList: {
					"accountType": "",
					"address": "",
					"areaId": "",
					"babySex": "",
					"barCode": "",
					"birthTime": '',
					"dadCard": "",
					"dadCensus": "",
					"days": "",
					"departId": uni.getStorageSync('departId') || '',
					"freeNum": "",
					"hospitalId": "",
					"hospitalName": "",
					"level": "",
					"momCard": "",
					"momCensus": "",
					"momName": "",
					"nation": "",
					"nickName": "",
					"phone": "",
					"profilePicture": "",
					"state": "",
					"userName": "",
					"userPwd": "",
					"userStatus": "",
					"weeks": "",
					"weight": '',
					"experimentCode":''
				},
			};
		},
		computed: {
			indicatorStyle() {
				return {
					background: 'rgba(238, 238, 238, 0.2)',
					height: '40px',
				};
			}
		},
		onLoad(options) {
			this.dataList.experimentCode = options.experimentCode
			this.dataList.weeks = this.daysWeeksList[0][0]
			this.dataList.days = this.daysWeeksList[1][0]
		},
		methods: {
			// 点击提交
			clickAddInfo() {
				let idCardReg =
					/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/

				let phoneReg = /(^1[3456789]\d{9}$)/
				if (this.radio) {
					if (this.dataList.momName == '') {
						uni.showToast({
							icon: 'none',
							type: 'error',
							title: '请填写母亲姓名'
						})
						return
					} else if (this.dataList.weeks == '') {
						uni.showToast({
							icon: 'none',
							type: 'error',
							title: '请填写孕周'
						})
						return
					} else if (this.dataList.momCard == '') {
						uni.showToast({
							icon: 'none',
							type: 'error',
							title: '请填写证件号'
						})
						return
					} else if (idCardReg.test(this.dataList.momCard) === false) {
						uni.showToast({
							icon: 'none',
							type: 'error',
							title: '身份证号输入错误'
						})
						return
					} else if (this.dataList.address == '') {
						uni.showToast({
							icon: 'none',
							type: 'error',
							title: '请填写居住地址'
						})
						return
					} else if (this.dataList.babySex == '') {
						uni.showToast({
							icon: 'none',
							type: 'error',
							title: '请选择婴儿性别'
						})
						return
					} else if (this.dataList.weight == '') {
						uni.showToast({
							icon: 'none',
							type: 'error',
							title: '请填写婴儿出生体重'
						})
						return
					} else if (this.dataList.birthTime == '') {
						uni.showToast({
							icon: 'none',
							type: 'error',
							title: '请选择婴儿生日'
						})
						return
					} else if (this.dataList.barCode == '') {
						uni.showToast({
							icon: 'none',
							type: 'error',
							title: '请填写血卡条码'
						})
						return
					} else if (this.dataList.phone == '') {
						uni.showToast({
							icon: 'none',
							type: 'error',
							title: '请填写联系人手机'
						})
						return
					} else if (phoneReg.test(this.dataList.phone) == false) {
						uni.showToast({
							icon: 'none',
							type: 'error',
							title: '请填写正确的联系人手机'
						})
						return
					} else {
						let address = this.region[0] + '-' + this.region[1] + '-' + this.region[2] + ',' + this.dataList.address
						this.dataList.address = address
						queryApi.inputInfo(this.dataList).then(res => {
							console.log(res);
							if (res) {
								uni.showToast({
									icon: 'none',
									title: '成功！'
								})
								setTimeout(() => {
									uni.switchTab({
										url: '../index'
									})
								}, 1500)
							}
						})
					}

				} else {
					uni.showToast({
						icon: 'none',
						type: 'error',
						title: '请同意隐私条款'
					})
				}

			},
			// 点击服务
			clickFuwu() {

			},
			// 点击隐私
			clickYinsi() {

			},
			// 点击隐私服务勾选
			clickRadio() {
				this.radio = !this.radio
			},
			// 扫一扫
			clickScan() {
				let that = this
				uni.scanCode({
					scanType: ['qrCode', 'barCode', 'DataMatrix', 'pdf417'],
					success: function(res) {
						that.dataList.barCode = res.result
					},
					fail: function(res) {
						uni.showToast({
							title: '出错了，请手动输入哦',
							icon: 'none'
						})
					}
				})
			},
			// 婴儿性别
			PickerChange(e) {
				this.babySexText = this.sexList[e.detail.value].name
				this.dataList.babySex = this.sexList[e.detail.value].code
			},
			// 孕周孕天
			dayWeeksChange(e) {
				this.dataList.weeks = this.daysWeeksList[0][e.detail.value[0]]
				this.dataList.days = this.daysWeeksList[1][e.detail.value[1]]
			},
			// 出生日期选择
			DateChange(e) {
				this.dataList.birthTime = e
			},
			// 地址选择
			RegionChange(e) {
				this.region = e.detail.value
				this.dataList.address = ''
			}
		}
	}
</script>

<style lang="less">
	.cu-form-group {
		min-height: 120rpx;

		.title {
			min-width: calc(4em + 15px);
		}

		input {
			padding-right: 40rpx;
		}
	}


	.addProjectInfo {
		input {
			text-align: right;
		}

		.but {
			margin-top: 8vh;
			width: 100vw;
			display: flex;
			align-items: center;
			flex-direction: column;

			.span {
				display: flex;
				align-items: center;

				radio {
					transform: scale(0.7);
				}

				.text-ref {
					color: #0081FF;
					border-bottom: 1px solid #276af3;
				}
			}

			.sendbut-box {
				padding: 4vh 10vw;
				width: 100vw;

				.sendbut {
					background: #276af3;
					color: #fff;
				}
			}


		}

	}


	.title-box {
		height: 4vh;
		font-size: 3vw;
		display: flex;
		align-items: center;
		padding: 1rpx 30rpx;
		background-color: #ffe4b2;
		color: #e08d09;
	}
</style>
